<template>
  <div class="project-detail-module">
    <div class="tool-bar">
      <div class="menu-list">
        <div style="display: flex;">
          <div class="menu-item" @click="selectTab(index)" :class="currentMenuIndex === index ? 'active' : ''" v-for="(item, index) in menuList" :key="index">{{item}}</div>
        </div>
        <div style="font-size: 18px; padding-right: 20px;">
          <i @click="goRelationGraph" class='el-icon-picture-outline' style="margin-right: 5px;"></i>
          <i @click="updateProject(projectInfo.id)" class="el-icon-setting"></i>
        </div>
      </div>
    </div>
    <div class="content">
      <div v-if="currentMenuIndex === 0" class="addtaskpage-wrapper">
        <div class="task-name">
          <img @click="showCover" :src="projectInfo.taskUrl? 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/livolobim/project/'+projectInfo.taskUrl : 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/livolobim/project/icon%20orange-1.png'">
          <textarea :readonly="cantEdit" v-model="projectInfo.taskName" placeholder="请输入项目名称"></textarea>
        </div>
        <div class="form-item-wrapper">
          <div class="form-label">
            <i class="el-icon-coin"></i>所属版块
          </div>
          <div class="form-input">
            <span style="color: #C0C4CC;">{{projectInfo.taskBelongName}}</span>
          </div>
        </div>
        <div class="form-item-wrapper">
          <div class="form-label">
            <i class="el-icon-user"></i>负责人
          </div>
          <div class="form-input" @click="selectDingUsers('principal')">
            <span :style="{'color': dingUserList.principal.name.length > 0? 'black': '#C0C4CC'}">{{dingUserList.principal.name.length > 0? dingUserList.principal.name.join(','): '选择负责人'}}</span>
          </div>
        </div>
        <div class="form-item-wrapper">
          <div class="form-label">
            <i class="el-icon-user"></i>确认人
          </div>
          <div class="form-input" @click="selectDingUsers('confirm')">
            <span :style="{'color': dingUserList.confirm.name.length > 0? 'black': '#C0C4CC'}">{{dingUserList.confirm.name.length > 0? dingUserList.confirm.name.join(','): '选择确认人'}}</span>
          </div>
        </div>
        <div class="form-item-wrapper">
          <div class="form-label">
            <i class="el-icon-date"></i>时间
          </div>
          <div class="form-input">
            <span :style="{'color': projectInfo.taskStartTime? 'black': '#C0C4CC'}" @click="selectDate('taskStartTime')">{{projectInfo.taskStartTime? projectInfo.taskStartTime: '选择开始时间'}}</span><span style="color: black;margin: 0 10px;">-</span><span :style="{'color': projectInfo.taskEndTime? 'black': '#C0C4CC'}" @click="selectDate('taskEndTime')">{{projectInfo.taskEndTime? projectInfo.taskEndTime: '选择截止时间'}}</span>
          </div>
        </div>
        <div class="form-item-wrapper">
          <div class="form-label">
            <i class="el-icon-time"></i>工期
          </div>
          <div class="form-input">
            <span :style="{'color': planTime? 'black': '#C0C4CC'}">
              {{planTime}}天     
            </span>
          </div>
        </div>
        <div class="form-item-wrapper" style="min-height:50px;height: auto;">
          <div class="form-label" style="width: 37px;">
            <i class="el-icon-edit-outline"></i>
          </div>
          <div class="form-input" @click="openInfoDialog" style="width: calc(100% - 37px)"> 
            <span v-if="!projectInfo.taskInfo && projectInfo.taskAttachment && projectInfo.taskAttachment.length === 0">添加描述和附件</span>
            <div v-if="projectInfo.taskInfo || (projectInfo.taskAttachment && projectInfo.taskAttachment.length > 0)" style="line-height: 32px;padding:8px;">
              <span style="color: black;word-break:break-all;">{{projectInfo.taskInfo}}</span>
              <div class="fileitem" v-for="(file, idx) in projectInfo.taskAttachment" :key="idx">
                <img style="width:16px;height:16px;position:relative;top:-2px;margin-right:2px;" :src="getPic(file.name)" alt="">
                <span @click.stop="downloadFile(file.url, file.name)" style="width: 90%;overflow:hidden;text-overflow: ellipsis;vertical-align:bottom;white-space:nowrap;display:inline-block;">{{file.name}}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="action-bar" v-if="showUpdateBtn && !cantEdit">
          <div @click="getProjectInfo(projectInfo.id)">取消</div>
          <div @click="projectOrTaskUpdate">保存</div>
        </div>
        <div class="add-btn" @click="showActions = true;"><i class="el-icon-menu"></i></div>
        <div class="actions" v-if="showActions">
          <div class="mask" @click="showActions = false;"></div>
          <div class="actions-content">
            <div @click="openReply"><i class="el-icon-chat-dot-square"></i>参与讨论</div>
            <div type="primary" v-if="projectInfo.taskStatus === '1' && projectInfo.taskPrincipalId === userInfo.dingId" @click="showTaskExplanationPage"><i class="el-icon-collection-tag"></i>标记完成</div>
            <div type="primary" v-if="projectInfo.taskStatus === '2' && projectInfo.taskConfirmId === userInfo.dingId" @click="showTaskExplanationPage"><i class="el-icon-collection-tag"></i>确认完成</div>
            <div type="primary" v-if="canRebootProject" @click="rebootProject"><i class="el-icon-collection-tag"></i>重启项目</div>
          </div>
        </div>
        <div class="reply-page" v-if="showTaskExplanation">
          <div class="mobile-input-wp">
            <el-input style="width: 100%;" autofocus="true" placeholder="请输入完成说明" @input="detectInput" rows="8" v-model="taskExplanation" type="textarea"></el-input>
          </div>
          <div class="bottom-btn">
            <div @click="showTaskExplanation = false;">关闭</div>
            <div @click="updateTaskStatus">确定</div>
          </div>
        </div>
        <div class="reply-page" v-if="showReply">
          <div class="mobile-input-wp">
            <el-input style="width: 100%;" autofocus="true" placeholder="请输入评论内容" @input="detectInput2" rows="8" v-model="dynamic.dynamicContent" type="textarea"></el-input>
          </div>
          <div class="upload-file">
            <input ref="uploadInput2" style="display:none;" type="file" @change="uploadFile($event, dynamic.dynamicAttachment)" multiple>
            <div class="upload-btn" @click="$refs.uploadInput2.click()">添加附件</div>
            <div class="fileitem" v-for="(file, idx) in dynamic.dynamicAttachment" :key="idx">
              <img style="width:16px;height:16px;position:relative;top:-2px;margin-right:2px;" :src="getPic(file.name)" alt="">
              <span @click="downloadFile(file.url, file.name)" style="width: 60%;overflow:hidden;text-overflow: ellipsis;vertical-align:bottom;white-space:nowrap;display:inline-block;">{{file.name}}</span>
              <span class="uploadtip" v-if="file.url" @click="delFile(idx, dynamic.dynamicAttachment)"><i class="el-icon-delete"></i></span>
              <span class="uploadtip" style="color: red;cursor:none;" v-if="!file.url">上传中<i class="el-icon-loading"></i></span>
            </div>
          </div>
          <div class="bottom-btn">
            <div @click="showReply = false;">关闭</div>
            <div @click="submitDynamic">确定</div>
          </div>
        </div>
        <div class="info-page" v-if="showInfo">
          <div class="task-info">
            <div class="mobile-input-wp">
              <el-input style="width: 100%;" autofocus="true" placeholder="请输入项目描述" @input="detectInput" rows="8" v-model="projectInfo.taskInfo" type="textarea"></el-input>
            </div>
          </div>
          <div class="upload-file">
            <input ref="uploadInput" style="display:none;" type="file" @change="uploadFile($event, projectInfo.taskAttachment)" multiple>
            <div class="upload-btn" @click="$refs.uploadInput.click()">添加附件</div>
            <div class="fileitem" v-for="(file, idx) in projectInfo.taskAttachment" :key="idx">
              <img style="width:16px;height:16px;position:relative;top:-2px;margin-right:2px;" :src="getPic(file.name)" alt="">
              <span @click="downloadFile(file.url, file.name)" style="width: 60%;overflow:hidden;text-overflow: ellipsis;vertical-align:bottom;white-space:nowrap;display:inline-block;">{{file.name}}</span>
              <span class="uploadtip" v-if="file.url" @click="delFile(idx, projectInfo.taskAttachment)"><i class="el-icon-delete"></i></span>
              <span class="uploadtip" style="color: red;cursor:none;" v-if="!file.url">上传中<i class="el-icon-loading"></i></span>
            </div>
          </div>
          <div class="bottom-btn">
            <div @click="showInfo = false;">取消</div>
            <div @click="showInfo = false;">确定</div>
          </div>
        </div>
        <el-dialog title="选择图片" :visible.sync="coverDialog"  width="80%" :append-to-body="true">
          <div class="cover-wrapper">
            <div v-for="cover in 15" :key="cover">
              <img @click="selectCover('icon%20orange-' + cover + '.png')" :src="'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/livolobim/project/icon%20orange-' + cover + '.png'" style="width: 40px; height: 40px;display:block;border-radius: 3px;">
            </div>
          </div>
        </el-dialog>
      </div>
      <div v-if="currentMenuIndex === 1">
        <div v-for="value in taskList" :key="value.id" :value="value">
          <div class="task-item" @click="goTaskDetail(value.id)">
            <span class="arrow-status" :class="getArrowType(value)"></span>
            <span class="task-status">{{getWord(value)}}</span>
            <div class="top">
              <div class="logo">
                <img :src="'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/livolobim/task/'+value.taskUrl"  style="width: 48px; height: 48px;border-radius: 5px;">
              </div>
              <div class="task-info">
                <p class="taskName">{{value.taskName}}</p>
                <p class="project"><span>{{value.taskBelongName}}</span></p>
              </div>
            </div>
            <div class="bottom">
              <p><i class="el-icon-user"></i><span>{{value.taskPrincipalName}}</span><span v-if="value.taskRealEndtime">{{value.taskRealEndtime}}</span><span v-if="analyzeData(value)" :style="{'color': analyzeData(value).indexOf('提前')>= 0 ? '#21D779': '#FF5050'}">（{{analyzeData(value)}}）</span></p>
            </div>
          </div>
        </div>
        <div v-if="taskList.length !== 0" class="nomore">已经到底了</div>
        <img v-if="taskList.length === 0" style="width:200px;margin: auto;position:absolute;top:0;right:0;left:0;bottom: 0;" src="../../../assets/livolobim/empty.png" alt="">
        <div @click="goAddTask" class="add-btn" :class="canCreatTask ? '' : 'forbidden'" :style="{'bottom': bottomBtnPosition}"><i class="el-icon-plus"></i></div>
      </div>
      <div v-if="currentMenuIndex === 2">
        <div v-for="(item, index) in attachmentList" :key="index" @click="downloadFile(item.attachment.url, item.attachment.name)" class="attachments">
          <img :src="getPic(item.attachment.name)">{{item.attachment.name}}
        </div>
        <div v-if="attachmentList.length !== 0" class="nomore">已经到底了</div>
        <img v-if="attachmentList.length === 0" style="width:200px;margin: auto;position:absolute;top:0;right:0;left:0;bottom: 0;" src="../../../assets/livolobim/empty.png" alt="">
      </div>
      <div v-if="currentMenuIndex === 3">
        <div class="statistics">
          <div class="statistics-item">
            <div class="title">统计数据</div>
            <div id="chart1" style="width:100%; height:150px"></div>
          </div>
          <div class="statistics-item">
            <div class="title">项目动态</div>
            <div class="project-content" v-infinite-scroll="loadTrends" infinite-scroll-disabled="disabled" infinite-scroll-immediate="false">
              <div class="date-wrapper" v-for="dateSection in dateCollect" :key="dateSection">
                <div class="project-wrapper" v-for="(projectName, projectIndex) in trendDataCollect[dateSection].projectNames" :key="projectName">
                  <div class="project-header">{{projectName}}</div>
                  <div class="project">
                    <div class="project-trend-wrapper">
                      <div class="project-trend" v-for="value in trendDataCollect[dateSection][trendDataCollect[dateSection].projectIds[projectIndex]]" :key="value.id">
                        <div class="time"><span style="color: black;font-size: 13px;">{{value.dynamicCreateTime.substr(11, 5)}}</span><br><span style="font-size: 12px;">{{value.dynamicCreateTime.substr(5, 5).replace('-','/')}}</span></div>
                        <div class="avatar"><img :src="value.executorAvatar"></div>
                        <div class="trend-detail">
                          <p class="row-1">{{value.dynamicExecutiveName}} <span>{{value.dynamicPerformOperation}}</span></p>
                          <span class="row-2">{{value.dynamicContent}}</span>
                          <div class="fileitem" style="width: 470px;" v-for="(file,index) in value.dynamicAttachment" :key="index">
                            <span style="cursor: pointer;" @click="downloadFile(file.url, file.name)">
                              <img style="width:16px;height:16px;position:relative;top:-2px;margin-right:2px;" :src="getPic(file.name)" alt="">{{file.name}}
                            </span>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div v-if="noMore" class="nomore">已经到底了</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import dingMixin from  '@/mixins/ding'
import {dateUtil} from '@/utils/dateUtil'
import formUtil from "@/utils/formUtil"

export default {
  name: '',
  data () {
    return {
      bottomBtnPosition: '20px',
      currentMenuIndex: 0,
      menuList: ['项目', '任务', '文件', '概况'],
      projectInfo: {},
      taskList: [],
      attachmentList: [],
      statisticsInfo: {
        totalAmount: 0,
        undoneAmount: 0,
        uncomfirmAmount: 0,
        completeAmount: 0,
        overdueAmount: 0,
        overduePercent: 0,
        aheadcompleteAmount: 0,
        ontimecompleteAmount: 0,
        overduecompleteAmount: 0,
        terminatedAmount: 0
      },
      dateCollect: [],
      trendDataCollect: {},
      isFirstLoading: true,
      loading: false,
      page: 1,
      totalPage: 1,
      chartPie: null,
      showActions: false,
      showReply: false,
      dynamic: {
        dynamicTaskId: 0,
        dynamicTaskName: '',
        dynamicExecutiveId: '',
        dynamicExecutiveName: '',
        dynamicContent: '',
        dynamicAscription: 0,
        dynamicAttachment: [],
      },
      showTaskExplanation: false,
      taskExplanation: '',
      canRebootThisProject: false,
      dingUserList: { 
        principal: { id: [], img: [], name: []},
        confirm: { id: [], img: [], name: []},
        manage: { id: [], img: [], name: []},
        cc: { id: [], img: [], name: []},
      },
      planTime: 0,
      coverDialog: false,
      projectInfoInit: {},
      isLoadingData: true,
      showInfo: false,
      hasUnCompleteTask: false,
    };
  },
  mixins: [dingMixin],
  components: {},
  computed : {
    disabled () {
      return this.isFirstLoading || this.loading || this.noMore
    },
    noMore () {
      return this.page >= this.totalPage;
    },
    canCreatTask() {
      return this.projectInfo.taskDeleteStatus === '0' && this.projectInfo.hasTaskCreateAuthority === '1' && this.projectInfo.taskStatus === '1'
    },
    canRebootProject() {
      return this.projectInfo.taskStatus === '3' && this.projectInfo.hasProjectAuthority === '1' && this.canRebootThisProject
    },
    cantEdit() {
      return !(this.projectInfo.taskDeleteStatus === '0' && this.projectInfo.hasProjectAuthority === '1')
    },
    showUpdateBtn() {
      return (this.projectInfoInit !== JSON.stringify(this.projectInfo)) && this.isLoadingData === false;
    },
  },
  mounted () {
    this.mobileGetDevice(({model, brand, version}) => {
      if(brand === 'iPhone' && ( model.indexOf('10') > 0 || model.indexOf('11') > 0)) {
        this.bottomBtnPosition = '66px';
      }
    })
    let id = this.$route.params.projectId || localStorage.getItem("projectId");
    if (id) this.init(id);
    localStorage.setItem("projectId", null)
  },
  activated() {
    if (this.chartPie) this.chartPie.resize()
  },
  methods: {
    detectInput() {
      if(this.taskExplanation.charAt(this.taskExplanation.length - 1) === '@'){
        this.complexPicker(1).then((data)=>{
          this.taskExplanation += data[0].name + ' '
        })
      }
    },
    detectInput2() {
      if(this.dynamic.dynamicContent.charAt(this.dynamic.dynamicContent.length - 1) === '@'){
        this.complexPicker(1).then((data)=>{
          this.dynamic.dynamicContent += data[0].name + ' '
        })
      }
    },
    async selectTab(index) {
      if (this.currentMenuIndex !== index) {
        this.currentMenuIndex = index;
        if(index === 2) {
          await this.getAttachmentList();
        } else if(index === 3) {
          await this.getStatistics();
          await this.getDynamicList(true);
        }
      }
    },
    updateProject(projectId) {
      localStorage.setItem("projectId", projectId);
      this.$router.push({ name: 'mlivolobim-addOrUpdateProject', params: {projectId: projectId}});
    },
    async init(id) {
      await this.getProjectInfo(id);
      await this.getTaskList(id);
    },
    async getProjectInfo(id) {
      this.isLoadingData = true;
      this.projectInfo = await this.$httpN.postB("division/task/projectInfo", { id: id });
      this.projectInfo.taskAttachment = this.projectInfo.taskAttachment === '' ? [] : JSON.parse(this.projectInfo.taskAttachment);
      //下级是否还有任务未完成
      let unCompleteTaskList = await this.$httpN.postB('division/task/getUnCompleteTask', {id: this.projectInfo.id});
      unCompleteTaskList.length > 0 ? this.hasUnCompleteTask = true :this.hasUnCompleteTask = false

      let taskBelongData = await this.$httpN.postB('division/plate/info', {id: this.projectInfo.taskBelongId});
      taskBelongData.plateStatus === '2' ? this.canRebootThisProject = true : this.canRebootThisProject = false
      if (this.projectInfo.taskStartTime !== "") this.planTime = parseInt((new Date(this.projectInfo.taskEndTime) - new Date(this.projectInfo.taskStartTime)) / 1000 / 60 / 60 / 24) + 1;
      if (this.projectInfo.taskPrincipalId !== "") {
        this.dingUserList.principal.id = this.projectInfo.taskPrincipalId.split(",");
        this.dingUserList.principal.img = this.projectInfo.principalAvatar.split(",");
        this.dingUserList.principal.name = this.projectInfo.taskPrincipalName.split(",");
      }
      if (this.projectInfo.taskConfirmId !== "") {
        this.dingUserList.confirm.id = this.projectInfo.taskConfirmId.split(",");
        this.dingUserList.confirm.img = this.projectInfo.confirmAvatar.split(",");
        this.dingUserList.confirm.name = this.projectInfo.taskConfirmName.split(",");
      }
      if (this.projectInfo.taskCcId !== "") {
        this.dingUserList.cc.id = this.projectInfo.taskCcId.split(",");
        this.dingUserList.cc.img = this.projectInfo.ccAvatar.split(",");
        this.dingUserList.cc.name = this.projectInfo.taskCcName.split(",");
      }
      this.projectInfoInit = JSON.stringify(this.projectInfo);
      this.isLoadingData = false;
    },
    async getTaskList(id) {
      this.taskList = await this.$httpN.postB("division/task/getSubTaskList", { id: id });
    },
    getArrowType(item) {
      if(item.taskStatus === '1') {
        return new Date(dateUtil.thisDay()) >= new Date(item.taskStartTime).getTime()? 'arrow-4': 'arrow-2'
      }else if(item.taskStatus === '9') {
        return 'arrow-3'
      }else if(item.taskStatus === '2') {
        return 'arrow-6'
      }else if(item.taskStatus === '3') {
        if(new Date(item.taskRealEndtime).getTime() > new Date(item.taskEndTime).getTime()) {
          return 'arrow-5'
        } else{
          return 'arrow-1'
        }
      }
    },
    getWord(item) {
      if(item.taskStatus === '1') {
        return new Date(dateUtil.thisDay()).getTime() >= new Date(item.taskStartTime).getTime()? '进行中': '未开始'
      }else if(item.taskStatus === '9') {
        return '已终止'
      }else if(item.taskStatus === '2') {
        return '待确认'
      }else if(item.taskStatus === '3') {
        if(new Date(item.taskRealEndtime).getTime() > new Date(item.taskEndTime).getTime()) {
          return '逾期完成'
        }else if(new Date(item.taskRealEndtime).getTime() === new Date(item.taskEndTime).getTime()){
          return '按时完成'
        }else{
          return '提前完成'
        }
      }
    },
    analyzeData(item) {
      if(item.taskStatus === '1') {
        if(new Date(dateUtil.thisDay()) < new Date(item.taskStartTime).getTime()){
          return ''
        }else {
          if(new Date(dateUtil.thisDay()) > new Date(item.taskEndTime).getTime()) {
            let time = this.daysDiff(dateUtil.thisDay(), item.taskEndTime);
            return `逾期${time}天`
          }else {
            let time = this.daysDiff(dateUtil.thisDay(), item.taskEndTime) + 1;
            return `剩余${time}天`
          }
        }
      }else if(item.taskStatus === '9') {
        return ''
      }else if(item.taskStatus === '2') {
        if(new Date(dateUtil.thisDay()) > new Date(item.taskEndTime).getTime()) {
          let time = this.daysDiff(dateUtil.thisDay(), item.taskEndTime);
          return `逾期${time}天`
        }else {
          let time = this.daysDiff(dateUtil.thisDay(), item.taskEndTime) + 1;
          return `剩余${time}天`
        }
      }else if(item.taskStatus === '3') {
        if(new Date(item.taskRealEndtime).getTime() > new Date(item.taskEndTime).getTime()) {
          let time = this.daysDiff(item.taskRealEndtime, item.taskEndTime);
          return `逾期${time}天`
        }else if(new Date(item.taskRealEndtime).getTime() === new Date(item.taskEndTime).getTime()){
          let time = this.daysDiff(item.taskRealEndtime, item.taskEndTime);
          return ''
        }else{
          let time = this.daysDiff(item.taskRealEndtime, item.taskEndTime);
          return `提前${time}天`
        }
      }
    },
    daysDiff(oDate1,oDate2){
      let  aDate, iDays;
      oDate1 = new Date(oDate1);
      oDate2 = new Date(oDate2);
      iDays = parseInt((oDate1 - oDate2) / 1000 / 60 / 60 /24);
      return Math.abs(iDays)
    },
    goAddTask () {
      if (!this.canCreatTask) return;
      localStorage.setItem("projectId", this.projectInfo.id)
      this.$router.push({ name: 'mlivolobim-addTask', params: {projectId: this.projectInfo.id, projectName: this.projectInfo.taskName}});
    },
    goTaskDetail(taskId) {
      localStorage.setItem("projectId", this.projectInfo.id)
      this.$router.push({ name: 'mlivolobim-taskDetail', params: {id: taskId}});
    },
    async getAttachmentList() {   
      let {list, totalPage} = await this.$httpN.postB('division/task/projectAttach', {
        limit: 999,
        id: this.projectInfo.id
      })
      this.collateAttachment(list);
    },
    collateAttachment(list) {
      let arr = [];
      list.forEach(res => {
        if(res.taskAttachment !== '') {
          JSON.parse(res.taskAttachment).forEach(attachment => {
            arr.push({id: res.id, attachment: attachment})
          })
        }
      })
      this.attachmentList = arr;
    },
    getPic(filename) {
      if(filename) {
        if(/\.(bmp|gif|jpg|pic|png|tif|jpeg)$/.test(filename)){
          return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276438103037435905.png'
        }else if(/\.(txt)$/.test(filename)){
          return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276438530785140737.png'
        }else if(/\.(xls|xlsx)$/.test(filename)){
          return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276438725690253314.png'
        }else if(/\.(doc|docx)$/.test(filename)){
          return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276439195636850689.png'
        }else if(/\.(psd)$/.test(filename)){
          return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276439984203751426.png'
        }else if(/\.(pdf)$/.test(filename)){
          return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276440139145535490.png'
        }else if(/\.(ppt|pptx|dps|dpt)$/.test(filename)){
          return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276440657859305473.png'
        }else if(/\.(rar|zip|arj|gz)$/.test(filename)){
          return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276442063039193090.png'
        }else if(/\.(html|htm)$/.test(filename)){
          return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276442135319633921.png'
        }else if(/\.(dwg|bak|dwt)$/.test(filename)){
          return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276441741667459074.png'
        }else if(/\.(wav|aif|au|mp3|ram|wma|mmf)$/.test(filename)){
          return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276442006684524546.png'
        }else if(/\.(avi|mov|rmvb|rm|flv|mp4)$/.test(filename)){
          return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276442233483124737.png'
        }else{
          return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276436590181343234.png'
        }
      }else {
        return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276436590181343234.png'
      }
    },
    downloadFile: function (url, fileName) {//跨域文件路径、下载到本地的文件名
      if(/\.(bmp|gif|jpg|pic|png|tif|jpeg)$/.test(url)) return this.dingPreviewPic(url);
      if(!url) return;
      this.mobileAlert('手机不支持下载文件，请到电脑端下载')
    },
    async getStatistics() {
      await this.$httpN.postB('division/statistics/statisticsByCustomize', {plateIds: this.projectInfo.taskBelongId, projectIds: this.projectInfo.id}).then(res => {
        if(res.length > 0) this.statisticsInfo = res[0];
        this.initCharts(this.statisticsInfo);
      })
    },
    initCharts (data) {
      var option = {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          right: 20,
          y: 'center',  //图例上下居中
          data: ['待完成', '待确认', '已完成', '已终止'],
          icon: "circle",
          itemWidth: 12,  // 设置宽度
          itemHeight: 12, // 设置高度
          formatter: function(name) {
            var index = 0;
            var clientlabels = ['待完成', '待确认', '已完成', '已终止'];
            var clientcounts = [data.undoneAmount, data.uncomfirmAmount, data.completeAmount, data.terminatedAmount];
            clientlabels.forEach(function(value,i){
              if(value == name) index = i;
            });
            return name + "  " + clientcounts[index];
          }
        },
        color: ['#21D779','#4495FF', '#B0C7CD', '#DBDADA'],
        series: [{
            name: '任务分布',
            type: 'pie',
            radius: ['50%', '70%'],
            center: ['35%', '50%'], //图的位置，距离左跟上的位置
            itemStyle : {
              normal : {
                label : {
                  show : false
                },
                labelLine : {
                  show : false
                }
              },
            },
            data: [
              {
                value: data.undoneAmount,
                name: '待完成',
                tooltip: {
                  icon: 'circle',
                  trigger: 'item',
                  formatter: function (param) {
                    return [
                      '<span style="display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 5px; background-color: '+param.color+'";></span>待完成: ' + data.undoneAmount + '（' +param.percent + '%）'+ '<br/>',
                      '<span style="float: right; margin-right: 8px;">逾期: ' + data.overdueAmount + '</span><br/>',
                    ].join('');
                  }
                }
              },{
                value: data.uncomfirmAmount,
                name: '待确认',
                tooltip: {
                  trigger: 'item',
                  formatter: function (param) {
                    return [
                      '<span style="display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 5px; background-color: '+param.color+'";></span>待确认: ' + data.uncomfirmAmount + '（' +param.percent + '%）',
                    ].join('');
                  }
                }
              },{
                value: data.completeAmount,
                name: '已完成',
                tooltip: {
                  formatter: function (param) {
                    return [
                      '<span style="display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 5px; background-color: '+param.color+'";></span>已完成: ' + data.completeAmount + '（' +param.percent + '%）'+ '<br/>',
                      '<span style="float: right; margin-right: 8px;">提前完成: ' + data.aheadcompleteAmount + '<br/>',
                      '按时完成: ' + data.ontimecompleteAmount + '<br/>',
                      '逾期完成: ' + data.overduecompleteAmount + '</span><br/>'
                    ].join('');
                  }
                }
              },{
                value: data.terminatedAmount,
                name: '已终止',
                tooltip: {
                  icon: 'circle',
                  trigger: 'item',
                  formatter: function (param) {
                    return [
                      '<span style="display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 5px; background-color: '+param.color+'";></span>已终止: ' + data.terminatedAmount + '（' +param.percent + '%）',
                    ].join('');
                  }
                }
              }
            ]
          }]
      }
      this.chartPie = echarts.init(document.getElementById('chart1'));
      this.chartPie.setOption(option);
　　},
    loadTrends() {
      this.loading = true;
      this.page ++;
      this.getDynamicList();
    },
    async getDynamicList(init) {
      if(init) {
        this.page = 1;
        this.dateCollect = [];
        this.trendDataCollect = {};
        this.isFirstLoading = true;
      }
      let {list, totalPage} = await this.$httpN.postB('division/dynamic/list', {
        dynamicAscription: '1',
        projectIds: this.projectInfo.id,
        page: this.page
      })
      
      this.setDataToCollect(list);

      this.loading = false;
      if(init) {
        this.totalPage = totalPage;
        this.$nextTick(() => {
          this.isFirstLoading = false;
        })
      }
    },
    setDataToCollect(list) {
      list.forEach(item => {
        item.dynamicAttachment ?  item.dynamicAttachment = JSON.parse(item.dynamicAttachment) : item.dynamicAttachment = []

        if(this.dateCollect.includes(item.dayGroup)) {
          if(this.trendDataCollect[item.dayGroup].projectIds.includes(item.projectId)){
            this.trendDataCollect[item.dayGroup][item.projectId].push(item);
          }else {
            this.trendDataCollect[item.dayGroup].projectIds.push(item.projectId);
            this.trendDataCollect[item.dayGroup].projectNames.push(item.projectName);
            this.$set(this.trendDataCollect[item.dayGroup], item.projectId, [item])
          }
        }else {
          this.dateCollect.push(item.dayGroup);
          this.$set(this.trendDataCollect, item.dayGroup, {
            projectIds: [item.projectId],
            projectNames: [item.projectName],
            [item.projectId]: [item]
          })
        }
      })
    },
    async showTaskExplanationPage() {
      if(this.hasUnCompleteTask) {
        this.mobileConfirm('其下有任务未完成，是否标记完成所有任务', async ()=> {
          if(!await this.$httpN.postB('division/task/completeSubTask',{id: this.projectInfo.id})) return;
          this.mobileMessage('其下所有任务已标记完成');
          this.getProjectInfo(this.projectInfo.id)
          window.NEEDREFRESH = true;
        })
      } else {
        this.taskExplanation = '';
        this.showTaskExplanation = true;
      }
    },
    //改变项目状态
    async updateTaskStatus() {
      if(!this.taskExplanation && this.projectInfo.taskStatus === '1') return this.mobileAlert('请输入完成项目说明')
      if (!await this.$httpN.postB("division/task/updateTaskStatus", { id: this.projectInfo.id, taskStatus: this.projectInfo.taskStatus === '1' ? '2' : '3', taskExplanation: this.taskExplanation}) ) return;
      this.mobileMessage(this.projectInfo.taskStatus === '1' ? '项目已标记完成': '项目已确认完成');
      window.NEEDREFRESH = true;
      this.$router.go(-1);
    },
    openReply() {
      this.showReply = true;
      this.showActions = false;
    },
    async uploadFile(e, target) {
      var files = e.target.files;
      var $this = this;
      Object.keys(files).forEach(function(key){
        var file = files[key];
        if(file.size / 1024 / 1024 > 20) return $this.mobileAlert('上传单个文件大小不能超过20MB!请压缩文件')
        var formData = new FormData();
        formData.append("file", file);
        formData.append("name", 'file');
        let newfile = {
          name: file.name,
          url: '',
          size: file.size,
          uploader: $this.userInfo.realName,
          time: dateUtil.thisDay()
        }
        target.push(newfile)
        $this.$httpN.upload('fileUpload', formData).then(res => {
          if(res.data.code === 0) {
            newfile.url = res.data.url;;
          }else if(res.data.code === 500) {
            $this.mobileAlert(res.data.msg)
            target.pop();
          }
        })
      })
      e.target.value = ''
    },
    delFile(idx,target){
      target.splice(idx, 1)
    },
    async submitDynamic() {
      if (this.dynamic.dynamicContent === '' && this.dynamic.dynamicAttachment.length === 0) return this.mobileAlert('请输入评论内容或添加附件后提交');
      if(this.dynamic.dynamicAttachment.filter(item => !item.url).length > 0) return this.mobileAlert('附件正在上传，请稍候……');
      if(! await this.$httpN.postB('division/dynamic/reviewSave', {
        dynamicTaskId: this.projectInfo.id,
        dynamicTaskName: this.projectInfo.taskName,
        dynamicExecutiveId: this.userInfo.dingId,
        dynamicExecutiveName: this.userInfo.realName,
        dynamicContent: this.dynamic.dynamicContent,
        dynamicAscription: '1',
        dynamicAttachment: this.dynamic.dynamicAttachment.length > 0 ? this.dynamic.dynamicAttachment : ''
      })) return 
      this.mobileMessage('评论成功');
      this.getDynamicList(true);
      this.getAttachmentList();
      formUtil.resetData(this.dynamic);
      this.dynamic.dynamicAttachment = [];
      this.showReply = false;
    },
    async rebootProject() {
      if (!await this.$httpN.postB("division/task/rebootTask", { id: this.projectInfo.id}) ) return this.mobileMessage('重启成功');
      window.NEEDREFRESH = true;
      this.$router.go(-1);
    },
    goRelationGraph() {
      localStorage.setItem("projectId", this.projectInfo.id)
      this.$router.push({ name: 'mlivolobim-relationGraph', params: {projectId: this.projectInfo.id}});
    },
    showCover() {
      if(!this.cantEdit) this.coverDialog = true;
    },
    openInfoDialog() {
      if(!this.cantEdit) this.showInfo = true;
    },
    selectDingUsers(showName, num = 1) {
      if(!this.cantEdit) {
        this.complexPicker(num, [], this.dingUserList[showName].id).then(
          async (data) => {
            this.dingUserList[showName].id = data.map(item => item.emplId);
            this.dingUserList[showName].img = data.map(item => item.avatar);
            this.dingUserList[showName].name = data.map(item => item.name);
            if(showName === 'principal') {
              this.projectInfo.principalAvatar = this.dingUserList[showName].img.join(',');
              this.projectInfo.taskPrincipalId = this.dingUserList[showName].id.join(',');
              this.projectInfo.taskPrincipalName = this.dingUserList[showName].name.join(',')
            }else if(showName === 'confirm') {
              this.projectInfo.confirmAvatar = this.dingUserList[showName].img.join(',');
              this.projectInfo.taskConfirmId = this.dingUserList[showName].id.join(',');
              this.projectInfo.taskConfirmName = this.dingUserList[showName].name.join(',')
            } else if(showName === 'cc') {
              this.projectInfo.ccAvatar = this.dingUserList[showName].img.join(',');
              this.projectInfo.taskCcId = this.dingUserList[showName].id.join(',');
              this.projectInfo.taskCcName = this.dingUserList[showName].name.join(',')
            }
          }
        );
      }
    },
    selectCover(img) {
      this.coverDialog = false;
      this.projectInfo.taskUrl = img
    },
    //编辑并保存任务
    async projectOrTaskUpdate() {
      if(!this.projectInfo.taskName) return this.mobileAlert('请输入'+this.taskDatatype+'名称')
      if(!this.projectInfo.taskPrincipalId) return this.mobileAlert('请选择'+this.taskDatatype+'负责人')
      if(!this.projectInfo.taskConfirmId) return this.mobileAlert('请选择'+this.taskDatatype+'确认人')
      if(!this.projectInfo.taskStartTime) return this.mobileAlert('请选择'+this.taskDatatype+'开始时间')
      if(!this.projectInfo.taskEndTime) return this.mobileAlert('请选择'+this.taskDatatype+'结束时间')
      if(!this.projectInfo.taskPrincipalId) return this.mobileAlert('请选择'+this.taskDatatype+'负责人')
      if(!this.projectInfo.taskPrincipalId) return this.mobileAlert('请选择'+this.taskDatatype+'负责人')
      if(this.projectInfo.taskAttachment.filter(item => !item.url).length > 0) return this.mobileAlert('附件正在上传，请稍候……');

      if(this.projectInfo.id) this.projectInfo.taskCreateTime = '';
      if (! await this.$httpN.postB("division/task/projectOrTaskUpdate",this.projectInfo)) return;
      this.mobileMessage('保存成功');
      this.getProjectInfo(this.projectInfo.id);
    },
    selectDate(type) {
      if(this.cantEdit) return;
      this.mobileSelectDate(this.currentDate, (date) => {
        this.projectInfo[type] = date;
        if(this.projectInfo.taskStartTime && this.projectInfo.taskEndTime && (new Date(this.projectInfo.taskStartTime) - new Date(this.projectInfo.taskEndTime) > 0) ) {
          this.projectInfo[type] = ''
          return this.mobileAlert('截止日期不可小于开始日期')
        }
        this.changePlanTime();
      });
    },
    changePlanTime(e) {
      let startTime = new Date(this.projectInfo.taskStartTime);
      let endTime = new Date(this.projectInfo.taskEndTime);
      this.planTime = parseInt((endTime - startTime) / 1000 / 60 / 60 / 24) + 1;
    },
  }
}
</script>

<style lang='scss' scoped>
.project-detail-module {
  height: 100vh;
  overflow: hidden;
  .tool-bar {
    background-color: #FFF;
    height: 46px;
    line-height: 46px;
    .menu-list {
      display: flex;
      flex-wrap: wrap;
      justify-content:space-between;
      align-content: flex-start;
      .menu-item {
        padding: 0 20px;
        text-align: center;
        line-height: 46px;
      }
      .active {
        color: #4983FF;
      }
    }
  }
  .content {
    height: calc(100% - 46px);
    overflow-y: auto;
    .addtaskpage-wrapper{
      margin: 20px;
      padding: 20px 16px;
      height: calc(100% - 40px);
      background: white;
      .task-name{
        position: relative;
        height: 90px;
        border-bottom: 1px solid #e7e5e5;
        padding-left: 105px;
        padding-top: 5px;
        img{
          width: 70px;
          height: 70px;
          border-radius: 3px;
          position: absolute;
          top:5px;
          left:20px;
        }
        textarea{
          width: 100%;
          height: 80px;
          border: none;
          outline: none;
          resize:none;
        }
      }
      .form-item-wrapper{
        height: 50px;
        border-bottom: 1px solid #e7e5e5;
        line-height: 50px;
        display: flex;
        .form-label{
          width: 110px;
          color: #909399;
          padding-left: 20px;
          i{
            margin-right: 3px;
          }
        }
        .form-input{
          color: #C0C4CC;
          flex: 1;
          input{
            width: 100%;
            height: 90%;
            border: 0;
            outline: none;
          }
        }
        .fileitem{
          line-height: 32px;
          margin-bottom: 5px;
          background: #F5F5F5;
          padding-left:10px;
          font-size: 12px;
          color: #606266;
          .uploadtip{
            float:right;
            margin-right: 20px;
            cursor: pointer;
          }
        }
      }
      .action-bar{
        position: fixed;
        line-height: 50px;
        width: 100%;
        bottom: 0;
        left: 0;
        display:flex;
        text-align: center;
        div{
          flex:1;
          font-size: 16px;
        }
        >div:first-child{
          background: #F2F2F2;
          color: #909399;
        }
        >div:last-child{
          color: white;
          background: #639efc;
        }
      }
    }
    .task-item{
      width: calc(100% - 40px);
      margin: 20px;
      background-color: #FFF;
      border-radius: 5px;
      box-shadow: 0px 0px 1px rgb(221, 221, 221);
      padding: 30px 45px;
      cursor: pointer;
      position: relative;
      &:hover{
        box-shadow: 0px 0px 4px rgb(221, 221, 221);
      }
      .arrow-status{
        width:0;
        height:0;
        position: absolute;
        top: 0;
        left: 0;
        border-top-left-radius: 5px;
        border-top:solid 30px #4495FF;
        border-left:solid 30px #4495FF ;
        border-bottom:solid 30px transparent;
        border-right:solid 30px transparent;
        &.arrow-1{
          border-top:solid 30px #21D779;
          border-left:solid 30px #21D779 ;
        }
        &.arrow-2{
          border-top:solid 30px #9987FA;
          border-left:solid 30px #9987FA ;
        }
        &.arrow-3{
          border-top:solid 30px #DBDADA;
          border-left:solid 30px #DBDADA ;
        }
        &.arrow-4{
          border-top:solid 30px #4495FF;
          border-left:solid 30px #4495FF ;
        }
        &.arrow-5{
          border-top:solid 30px #B0C7CD;
          border-left:solid 30px #B0C7CD ;
        }
        &.arrow-6{
          border-top:solid 30px #E6A23C;
          border-left:solid 30px #E6A23C ;
        }
      }
      .task-status{
        position: absolute;
        width: 60px;
        line-height: 20px;
        left: -6px;
        top: 11px;
        color: white;
        transform: rotate(-45deg);
        text-align: center;
        font-weight: normal;
      }
      &::after{
        content: '';
        width:0;
        height:0;
        position: absolute;
        top: 0;
        left: 0;
        border-top-left-radius: 5px;
        border-top:solid 15px white;
        border-left:solid 15px white ;
        border-bottom:solid 15px transparent;
        border-right:solid 15px transparent;
      }
      .top{
        display:flex;
        .logo{
          width: 48px;
          height: 48px;
          text-align: center;
          background: #409EFF;
          text-align: center;
          border-radius: 4px;
        }
        .task-info{
          width: calc(100% - 48px);
          p{
            margin: 0;
            padding-left:10px;
          }
          .taskName{
            overflow:hidden;
            white-space:nowrap;
            text-overflow:ellipsis;
          }
          .project{
            margin-top: 15px;
            overflow:hidden;
            white-space:nowrap;
            text-overflow:ellipsis;
            span{
              background: #FFDCDC;
              color: #FF5050;
              padding: 2px 6px;
              border-radius: 3px;
            }
          }
        }
      }
      .bottom{
        margin-top: 10px;
        p{
          margin: 5px 0 0 0 ;
          color: #79828C;
          span{
            margin-left: 5px;
          }
        }
      }
      &:last-child {
        margin-bottom: 0;
      }
    }
    .nomore {
      text-align: center;
      margin: 10px;
      font-size: 12px;
      color: #909399;
    }
    .attachments {
      width: calc(100% - 40px);
      background-color: #FFF;
      height: 50px;
      line-height: 50px;
      margin: 10px 20px 0 20px;
      padding: 0 20px;
      overflow: hidden;
      text-overflow:ellipsis;
      white-space: nowrap;
      img {
        width: 30px;
        height: 30px;
        margin-right: 10px;
      }
    }
    .statistics {
      width: 100%;
      margin-top: 10px;
      .statistics-item {
        background-color: #FFF;
        width: 100%;
        margin-top: 10px;
        overflow: hidden;
        .title {
          padding-left: 20px;
          height: 40px;
          line-height: 40px;
          border-bottom: 1px solid #dcdfe6;
          font-weight: bold;
        }
        .project-content{
          height: calc(100vh - 296px);
          padding-top: 20px;
          overflow-y: auto;
          &::-webkit-scrollbar {/*滚动条整体样式*/
            width: 0px;
            height: 0px;
          }
          .project-wrapper{
            padding: 0 16px;
            background: white;
            border-radius: 3px;
            .project-header{
              width: 100px;
              line-height: 32px;
              border-radius: 100px;
              background: #ECECEC;
              color: #75797E;
              text-align: center;
              margin-left: 25px;
              position: relative;
              z-index: 2;
            }
            .project-trend-wrapper{
              .project-trend{
                overflow-x: hidden;
                display: flex;
                .avatar{
                  width: 30px;
                  margin-left: 20px;
                  margin-right: 15px;
                  position: relative;
                  img{
                    width: 30px;
                    height: 30px;
                    border-radius: 50%;
                    position: absolute;
                    z-index: 2;
                  }
                  &::after{
                    content: '';
                    height: 100%;
                    position: absolute;
                    top:0;
                    left: 15.5px;
                    z-index: 1;
                    border-width: 1px;
                    border-style: dashed;
                    border-color: #ECECEC;
                    border-right-width: 0px;
                  }
                }
                &:first-child{
                  .avatar::before{
                    content: '';
                    height: 30px;
                    position: absolute;
                    top:-30px;
                    left: 15.5px;
                    z-index: 1;
                    border-width: 1px;
                    border-style: dashed;
                    border-color: #ECECEC;
                    border-right-width: 0px;
                  }
                }
                .time{
                  text-align: center;
                  color: #B8BFCB;
                }
                .trend-detail{
                  padding-top: 5px;
                  padding-bottom: 20px;
                  width:calc(100% - 110px);
                  p{
                    margin: 0;
                  }
                  .row-1{
                    font-size: 12px;
                    font-weight: bold;
                    color: #606266;
                    span{
                      margin-left: 10px;
                      color:#606266;
                      font-size:12px;
                      font-weight: normal;
                    }
                  }
                  .row-2{
                    font-size: 12px;
                    margin: 10px 0;
                    display: inline-block;
                    color: #909399;
                    cursor: pointer;
                    white-space: pre-line;
                    width:100%;
                    word-wrap: break-word;
                  }
                }
              }
              &:first-child {
                margin-top: 20px;
              }
            }
          }
        }
      }
    }
  }
  .add-btn {
    position: absolute;
    right: 20px;
    bottom: 20px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #409EFF;
    background-image: linear-gradient(#79BBFF, #409EFF);
    box-shadow: 1px 1px 1px rgb(221, 221, 221);
    text-align: center;
    color: #FFF;
    font-size: 1.5rem;
    line-height: 40px;
    z-index: 3;
  }
  .forbidden {
    background-color: #909399;
    background-image: none;
  }
  .actions{
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10;
    .mask{
      background: rgba(0,0,0,0.5);
      height: 100%;
      position: absolute;
      top:0;
      left:0;
      width: 100%;
    }
    .actions-content{
      position: absolute;
      background: white;
      bottom: 20px;
      right: 20px;
      border-radius: 3px;
      div{
        line-height: 44px;
        width: 145px;
        text-align: center;
        border-bottom: 1px solid #F6F6F6;
        color: #606266;
        i{
          font-size: 20px;
          margin-right: 5px;
          color: #909399;
          position: relative;
          top:3px;
        }
      }
      >div:last-child{
        border-bottom: none;
      }
    }
  }
  .reply-page{
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10;
    background: white;
    padding: 16px;
    .bottom-btn{
      position: absolute;
      bottom: 0;
      right:0;
      width: 100%;
      display: flex;
      div{
        flex:1;
        text-align: center;
        line-height: 50px;
        background: #F2F2F2;
        color: #8D8F96;
      }
      >div:last-child{
        color:white;
        background: #639EFC;
      }
    }
    .task-info{
      textarea{
        width: 100%;
        height: 250px;
        border: none;
        outline: none;
        resize:none;
        background: #F9F9F9;
        padding: 10px;
      }
    }
    .upload-file{
      margin-top: 30px;
      font-size: 14px;
      color: #409EFF;
      .upload-btn{
        color: #409EFF;
        margin-bottom: 10px;
      }
    }
    .fileitem{
      line-height: 32px;
      margin-bottom: 5px;
      background: #F5F5F5;
      padding-left:10px;
      font-size: 12px;
      color: #606266;
      .uploadtip{
        float:right;
        margin-right: 20px;
        cursor: pointer;
      }
    }
  }
}
.cover-wrapper{
  display: flex;
  flex-wrap: wrap;
  div{
    height: 40px;
    width: 40px;
    background: #409EFF;
    color: white;
    line-height: 40px;
    text-align: center;
    font-size: 40px;
    position: relative;
    border-radius: 5px;
    margin: 5px;
  }
}
.info-page{
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10;
  background: white;
  padding: 16px;
  z-index: 10;
  .bottom-btn{
    position: absolute;
    bottom: 0;
    right:0;
    width: 100%;
    display: flex;
    div{
      flex:1;
      text-align: center;
      line-height: 50px;
      background: #F2F2F2;
      color: #8D8F96;
    }
    >div:last-child{
      color:white;
      background: #639EFC;
    }
  }
  .task-info{
    textarea{
      width: 100%;
      height: 250px;
      border: none;
      outline: none;
      resize:none;
      background: #F9F9F9;
      padding: 10px;
    }
  }
  .upload-file{
    margin-top: 30px;
    font-size: 14px;
    color: #409EFF;
    .upload-btn{
      color: #409EFF;
      margin-bottom: 10px;
    }
  }
  .fileitem{
    line-height: 32px;
    margin-bottom: 5px;
    background: #F5F5F5;
    padding-left:10px;
    font-size: 12px;
    color: #606266;
    .uploadtip{
      float:right;
      margin-right: 20px;
      cursor: pointer;
    }
  }
}
</style>